<template>
  <s-modal
    title="详情"
    :visible="visible"
    :width="properties.width"
    @cancel="visible = false"
    @ok="save()"
  >
    <div :style="{ height: properties.height }">
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <dynamic-form :form="formValue" :items="items" @change="test">
          </dynamic-form>
        </s-form>
      </s-scroll>
    </div>
    <json-display-detail ref="jsonDisplay" />
  </s-modal>
</template>

<script>
import JsonDisplayDetail from '../display/jsonDetail/index.vue'
import DynamicForm from '../../index.vue'
export default {
  name: 'Preview',
  components: { DynamicForm, JsonDisplayDetail },
  props: {
    properties: {
      required: true,
      type: Object,
      default: () => {
        return {}
      }
    },
    items: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      formValue: {},
      visible: false
    }
  },
  methods: {
    test(v) {
      console.log(v)
    },
    open() {
      this.visible = true
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        this.$refs.jsonDisplay.open(values)
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
